// import { Picker } from 'antd-mobile'
import React from 'react'

import startLocation from './MainSetLocation/maptext'
import Banner from '../../components/Banner/Banner'
import axios from 'axios'
// import * as API from '../../Store/mainPageApi'
import MainType from '../../components/MainType/MainType'
import PickerType from '../../components/PickerBtn/Pickers'
import MainFoodsList from '../../components/MainFoodsList/MainFoodsList'
// import MainStoreLidd from '../../components/MainFoodsList/MainFoodsList'
import './Main.css'
import { NavLink } from 'react-router-dom'
import { inject, observer } from 'mobx-react'
@inject('address')
@observer
class Main extends React.Component {
    constructor() {
        super()
        this.state = {
            serachTips: '乡村基 满30-15',
            poisdata: [],
            aoisdata: {},
            isloading: false,
            istotop: false,
            serachData: {
                /* 搜索内容 */
                object: '',
                /* 商店类型 */
                sort_type_name: '',
                /* 是否优惠 */
                count: false
            }
        }
    }

    componentDidMount() {
        // this.getStores('')
        // this.getLocation()
        let useraddress = this.props.address.useraddress
        if (useraddress === undefined || useraddress.name === undefined) {
            console.log("请求了位置信息")
            this.getLocation()
        }
        else {

            this.setState({
                aoisdata: useraddress
            })
        }


    }

    getaddress = (location) => {
        console.log(location)
        axios({
            url: `https://restapi.amap.com/v3/geocode/regeo?key=6c11990ede40ff54f4401b963120730f&location=${location}&poitype=&radius=1000&extensions=all&batch=false&roadlevel=0`,
            type: 'get',
            dataType: 'jsonp',
        }).then(data => {
            console.log(data.data.regeocode.aois[0]);
            return this.setState({
                aoisdata: data.data.regeocode.aois[0]
            })

            // this.setState({ poisdata: data.data.regeocode.pois })

        }).then(data => {
            this.props.address.setAddress(this.state.aoisdata)
        })

    }
    getLocation = () => {

        startLocation.then(({ lat, lng }) => {
            // console.log(lat);
            // console.log(lng);
            this.getaddress(`${lng},${lat}`)

        })

    }
    // componentDidUnmount() {
    //     window.onscroll = '';
    //     //window.removeEventListener('scroll', this.handler.bind(this),false)
    // }
    changeSelectCount = (keyname, val) => {
        console.log('改变了搜索条件' + keyname)
        return (e) => {
            let target = {}
            if (keyname === 'count') {
                target = Object.assign({}, this.state.serachData, { [keyname]: !this.state.serachData[keyname] })
            }
            if (keyname === 'sort_type_name') {
                target = Object.assign({}, this.state.serachData, { [keyname]: val })
            }
            if (keyname === 'object') {
                target = Object.assign({}, this.state.serachData, { [keyname]: e.target.value })
            }


            new Promise(resolve => {
                this.setState({
                    serachData: target
                })
                resolve()
            }).then(() => {
                this.serachShop()
            })
            // console.log(this.state.serachData)
        }

    }
    serachShop = () => {
        console.log(this.child)

        this.child.getData({ ...this.state.serachData, currentPage: 1, pageSize: 1 }, true)
        this.child.innitcurrentpage()

    }
    render() {
        let { aoisdata, serachTips, serachData, istotop } = this.state
        // let mainMethod = {
        //     getShop: this.getStores,
        //     changeSelectCount: this.changeSelectCount
        // }
        let showaddress = ''
        if (aoisdata === undefined || aoisdata.name === undefined) {
            showaddress = "请选择当前位置"
        } else {
            showaddress = aoisdata.name
        }

        return (
            /* html */
            <div className='main-content-m'>
                <div></div>

                <div className={istotop ? 'main-item noshandow-main-item round-item f' : 'main-item noshandow-main-item round-item'}>
                    <NavLink className='location' to='/Home/MainSetLocation'><span className='iconfont icon-juli'></span><span className='nowraptext'>{showaddress}</span><span className='iconfont icon-iconfontjiantou5'></span></NavLink>
                    <div className='serach-item'>
                        <span className='iconfont icon-gonggao'></span>
                        <input type="text" value={this.state.serachData.object} placeholder={serachTips} onChange={this.changeSelectCount('object', '')} /><button onClick={this.serachShop}>搜索</button>
                    </div>
                    {/* <ul className='tuijian'><li></li></ul> */}
                </div>
                <div className='main-item round-item'>
                    <Banner />
                </div>
                <div className='main-item round-item'>
                    <MainType />
                </div>

                <div className='main-item noshandow-main-item round-item'>
                    <PickerType selectNowCount={serachData.count} changeSelect={this.changeSelectCount} />
                </div>
                <div className='main-item noshandow-main-item '>
                    <MainFoodsList serachData={serachData} onRef={(ref) => { this.child = ref }} />
                </div>
                {/* <NavLink to='/Home/StoreList'>列表</NavLink> */}
            </div>
        )
    }
}

export default Main